<template>
  <div class="search-container">
    <el-input
      :model-value="modelValue"
      @update:model-value="handleInput"
      :placeholder="placeholder"
      class="search-input"
      clearable
    >
      <template #prefix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";

interface Props {
  modelValue?: string;
  placeholder?: string;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
  placeholder: "请输入关键字搜索",
});

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const handleInput = (value: string) => {
  emit("update:modelValue", value);
};
</script>

<style lang="scss" scoped>
.search-container {
  padding: 18px 20px 0 20px;
  background-color: #ffffff;
}

.search-input {
  :deep(.el-input__wrapper) {
    background-color: #F5F6F7;
    border-radius: 10px;
    box-shadow: none;
    padding: 8px 15px;
  }

  :deep(.el-input__inner) {
    font-size: 14px;
  }

  :deep(.el-input__prefix) {
    color: #999;
  }
}
</style>

